<!-- 组件选择器selector的4种方式 -->
<!-- <top-header></top-header> -->
<!-- <div top-heder></div> -->
<!-- <div class="top-header" ></div> -->
<!-- <div style="position:fixed;width:100%; z-index: 999;">
    <app-header></app-header>
</div>

<user-list #userlist ></user-list> -->

<!-- 组件上引用变量  #studentlist -->
<!-- <app-student-list #studentlist (itemclick)="selectStudentClick($event)"></app-student-list>
<app-student-detail *ngIf="showdialog" [student]="studentlist.selectStudent" 
(dialogClose)="dialogshow($event)"> -->

<!-- Angular中的ViewChild -->
<!-- <app-student-list #studentlist (itemclick)="selectStudentClick($event)"></app-student-list>
<app-student-detail *ngIf="showdialog" [studentListComponent]="studentListComponent" 
(dialogClose)="dialogshow($event)"> -->

<!-- <app-student-list #studentlist (itemclick)="selectStudentClick($event)"></app-student-list> -->
<!-- 提问：这里如何点击关闭，遮罩层被关闭？ 
    答案：app-student-detail组件中通过修改studentListComponent!.selectStudent=undefined;
    -->
<!-- <app-student-detail *ngIf="studentListComponent?.selectStudent" [studentListComponent]="studentListComponent" > -->
    <!-- <app-student-detail *ngIf="studentlist?.selectStudent" [studentListComponent]="studentListComponent" >
</app-student-detail> -->

<!-- 显示加载指示器 -->
<div class="loading-indicator" *ngIf="loading">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  
<router-outlet></router-outlet>

